<template>
  <div>
    <el-upload ref="UploadRef" :action="uploadImgUrl" :on-success="handleUploadSuccess" :before-upload="handleBeforeUpload"
      :on-error="handleUploadError" :on-exceed="onExceed" :multiple="multiple" :limit="limit" name="file"
      :headers="headers" :file-list="fileList" :show-file-list="false" :disabled="!disabled">
      <div class="card d f-w">
        <div v-for="(file, index) in list" :key="index" class="card-item">
          <img class="card-item-img" :src="file.url" alt="" />
          <div class="card-item-actions d j-c a-c">
            <i class="el-icon-zoom-in" @click.stop="handlePictureCardPreview(file)" v-if="zoomShow"></i>
            <i class="el-icon-download" v-if="disabled && downloadShow" @click.stop="handleDownload(file)"></i>
            <i class="el-icon-delete" v-if="disabled && deleteShow" @click.stop="handleRemove(file, index)"></i>
          </div>
        </div>
        <div class="card-item d j-c a-c f" v-if="disabled">
          <i slot="default" class="el-icon-plus"></i>
        </div>
      </div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name:'ImageMuchUpload',
    props: {
      limit: {
        //最大选择数量
        type: Number,
        default: 1,
      },
      multiple: {
        //是否多选
        type: Boolean,
        default: true,
      },
      zoomShow: {
        //预览
        type: Boolean,
        default: true,
      },
      downloadShow: {
        //下载
        type: Boolean,
        default: false,
      },
      deleteShow: {
        // 删除
        type: Boolean,
        default: true,
      },
      fileType: {
        // 文件类型
        type: Array,
        default: () => ["jpg", "png", "JPG", "JPEG", "PNG"],
      },
      value: {
        // 传入数据 使用组件v-model绑定 [url,url,url]
        type: Array,
        default: () => [],
      },
      disabled: {
        //是否可操作
        type: Boolean,
        default: true,
      },
    },

    computed: {
      // 列表
      list() {
        let temp = 1;
        if (this.value) {
          // 首先将值转为数组
          const list = Array.isArray(this.value) ? this.value : [this.value];
          // 然后将数组转为对象数组
          return list.map((item) => {
            if (typeof item === "string") {
              item = {
                name: item,
                url: item
              };
            }
            // item.uid = item.uid || new Date().getTime() + temp++;
            return item;
          });
        } else {
          this.fileList = [];
          return [];
        }
      },
    },

    data() {
      return {
        dialogImageUrl: "",
        dialogVisible: false,
        uploadImgUrl: process.env.VUE_APP_BASE_API + '/file/upload', // 上传的图片服务器地址
        headers: {
          Authorization: '',
        },
        fileList: [],
      };
    },

    created() {
      this.headers.Authorization = this.$store.getters.token
      this.fileList = this.list;
    },

    methods: {
      // 上传成功
      handleUploadSuccess(res) {
        this.$emit("handleUploadSuccess", res.data);
        this.loading.close();
      },
      // 上传前
      handleBeforeUpload(file) {
        this.loading = this.$loading({
          lock: true,
          text: "上传中",
          background: "rgba(0, 0, 0, 0.7)",
        });
        if (this.fileType) {
          let fileExtension = "";
          if (file.name.lastIndexOf(".") > -1) {
            fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
          }
          const isTypeOk = this.fileType.some((type) => {
            if (file.type.indexOf(type) > -1) return true;
            if (fileExtension && fileExtension.indexOf(type) > -1) return true;
            this.loading.close();
            return false;
          });
          if (!isTypeOk) {
            this.$message.error(
              `文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
            );
            this.loading.close();
            return false;
          }
        }
        return true;
      },
      // 上传失败
      handleUploadError() {
        this.$message({
          type: "error",
          message: "上传失败",
        });
        this.loading.close();
      },
      // 删除
      handleRemove(file, index) {
        this.fileList.splice(index, 1);
        this.$emit("handleRemove", file, index);
      },
      // 查看
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 下载
      handleDownload(file) {
        console.log("handleDownload", file);
      },
      // 超出限制
      onExceed(file, filelist) {
        this.$message({
          type: "warning",
          message: `超出限制,最多只能上传${this.limit}张`,
        });
        this.loading.close();
      },
    },
  };
</script>
<style>
  .el-upload--picture-card {
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 110px;
    height: 110px;
  }

  .el-upload-list--picture-card .el-upload-list__item>div {
    width: 100%;
    height: 100%;
  }

  .upLaods>.el-form-item__content>div {
    display: flex;
    /* align-items: center; */
    flex-wrap: wrap;
  }
  .f{
   display: flex;
   align-items: center;
   justify-content: center;
  }
</style>
<style lang="scss" scoped>
  ::v-deep {
    .card {
      width: 100%;
      height: auto;
      border: none;
      display: flex;
      align-items: center;

      &-item {
        width: 110px;
        height: 110px;
        margin: 0 10px 10px 0px;
        position: relative;
        overflow: hidden;
        border: 1px dotted #409eff;
        border-radius: 10px;


        &-img {
          width: 110px;
          height: 110px;
        }

        .el-icon-plus {
          color: #409eff;
          font-size: 20px;
        }
      }

      &-item:hover {
        .card-item-actions {
          width: 150px;
          height: 150px;
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.6);

          .el-icon-zoom-in,
          .el-icon-download,
          .el-icon-delete {
            color: #ffffff;
            font-size: 20px;
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>
